import React, { Component } from 'react';
import { Modal, Dropdown, Menu, Icon } from 'antd';
import moment from 'moment';
import _ from 'lodash';
import cass from 'classnames';
import TitleItem from '../../components/TitleItem';
import TaskInfoModal from './taskInfoModal';
import { EditInputModal, EditInput, EditMultiInput, EditDatePicker } from '../../components/EditComponent';

const confirm = Modal.confirm;

const styles = {
    wrapItem: {
        display: 'flex',
        flexDirection: 'row',
        flexWrap: 'wrap',
        paddingLeft: '8px'
    },
    item: {
        width: '50%',
        paddingRight: '18px',
        marginBottom: '6px'
    },
    flex: {
        display: 'flex',
    },
    shrink: {
        flexShrink: 0,
        minWidth: '80px',
        textAlign: 'left',
        color: '#a7a7a7'
    },
    left: {
        textAlign: 'left',
        paddingBottom: '4px',
    },
    tips: {
        color: '#6b6b6b',
        paddingTop: '8px',
        minHeight: '32px',
        paddingRight: '44px',
        position: 'relative',
        wordBreak: 'break-all'
    },
    save: {
        marginLeft: '10px'
    },
    dots: {
        position: 'absolute',
        right: '14px',
        fontSize: '20px',
        color: '#000'
    },
    flag: {
        color: '#ec3223 '
    }
}

class TaskInfo extends Component {

    state = {
        edit: false,
        linkModal: false,
        begintime: moment().format('YYYY-MM-DD HH:mm:ss'),
        contacts: []
    }

    componentWillMount() {
        const { create } = this.props;
        if (create) {
            // 项目详情创建任务带入项目信息
            const baseData = this.props.commonState.baseData;
            if (baseData) this.setBaseValue(baseData);
            return;
        };
        this.setBaseValue(this.props.detailData.info);
    }

    componentWillReceiveProps(nextProps) {
        const { create } = this.props;
        if (create) {
            // 项目详情创建任务带入项目信息
            const baseData = this.props.commonState.baseData;
            if (baseData) this.setBaseValue(baseData);
            return;
        };
        this.setBaseValue(nextProps.detailData.info);
    }

    setBaseValue({ projectid, stageid, projectname, stagename, begintime = moment().format('YYYY-MM-DD HH:mm:ss'), content, addressname, contacts = [] }) {
        this.setState({ projectid, stageid, projectname, stagename, begintime, content, addressname, contacts });
    }

    onInfoEdit = () => {
        const { edit } = this.state;
        this.setState({ edit: !edit });
    }

    // 保存变更
    valueChange = (key) => (v, s) => {
        if (key === 'project') {
            const { recid: projectid, recname: projectname } = v;
            const { stageid, stagename } = s;
            this.setState({ projectid, projectname, stageid, stagename });
        }
        this.setState({ [key]: v });
    }

    getValue = () => {
        const { projectid, stageid, projectname, stagename, begintime, content, addressname, contacts } = this.state;
        const list = contacts.concat();
        const noContacts = list.every(v => !v.name);
        return {
            projectid: projectid || null, stageid: stageid || 0, addresslocation: '',
            projectname, stagename,
            begintime, content, addressname,
            contacts: noContacts ? [] : list
        };
    }

    // 取消编辑恢复默认值
    onCancelEdit = () => {
        this.setBaseValue(this.props.detailData.info);
        this.setState({ edit: false });
    }

    onSave = () => {
        const params = this.getValue();
        const { detailData: { info: { recid } }, save } = this.props;
        save({ ...params, recid });
    }

    ChangeTaskStatus = (isFinish) => {
        const { detailData: { info: { recid: taskid } } } = this.props;
        const { complete, restart } = this.props;
        confirm({
            title: isFinish ? '是否重启任务？' : '是否将任务设为已完成？',
            content: '',
            okText: "确定",
            cancelText: "取消",
            onOk() {
                isFinish ? restart({ taskid }) : complete({ taskid })
            },
        });
    }

    render() {
        const { edit, linkModal } = this.state;
        const { create, alarmTaskList, detailData, col = 2 } = this.props;
        // create 表示创建任务
        const isEdit = create || edit;

        const { projectid, stageid, projectname, stagename, begintime, content, addressname, contacts } = this.state;

        // 添加权限判断
        const ishost = _.get(detailData, 'info.ishost');
        this.isBoss = _.get(detailData, 'info.ismanager') || ishost;
        const isFinish = _.get(detailData, 'info.taskstatus') === 2;
        const hasBtn = !create && this.isBoss && !isFinish;

        const itemStyle = { ...styles.item, ...isEdit ? {} : styles.flex, width: col === 1 ? '100%' : '50%' };
        const lableStyle = { ...styles.shrink, ...isEdit ? styles.left : {} };
        return (
            <>
                {!create ? (
                    <h2 style={styles.tips}>
                        {content}
                        {ishost ? <span style={styles.flag} className={cass('mdi', 'mdi-flag')} key="flag" /> : null}
                        {this.isBoss ? (
                            <Dropdown
                                key="dot"
                                overlay={(
                                    <Menu onClick={({ key }) => this[key](isFinish)}>
                                        <Menu.Item key="ChangeTaskStatus">{isFinish ? '重启任务' : '完成任务'}</Menu.Item>
                                    </Menu>
                                )}
                            >
                                <span className={cass('mdi', 'mdi-dots-horizontal', 'mainColor')} style={styles.dots} />
                            </Dropdown>
                        ) : null}
                    </h2>
                ) : null}
                <TitleItem
                    title="任务信息"
                    onClick={this.onInfoEdit}
                    icon={
                        hasBtn ? (
                            edit ? [
                                <span onClick={this.onCancelEdit} key="cancle">取消</span>,
                                <span onClick={this.onSave} key="edit" style={styles.save}>保存</span>,
                            ] : <Icon type="edit" className="mainColor" />
                        ) : null
                    }
                />
                <div style={styles.wrapItem}>
                    <div style={itemStyle}>
                        <div style={lableStyle}>关联项目阶段</div>
                        <EditInputModal value={projectname ? `[${stagename}] ${projectname}` : ''} edit={isEdit} onClick={() => this.setState({ linkModal: true })} />
                        <TaskInfoModal
                            value={`${projectid}**${stageid}`}
                            show={linkModal}
                            onOk={this.valueChange('project')}
                            onCancel={() => this.setState({ linkModal: false })}
                        />
                    </div>
                    <div style={itemStyle}>
                        <div style={lableStyle} className={cass({ require: isEdit })}>任务开始时间</div>
                        <EditDatePicker
                            value={begintime}
                            edit={isEdit}
                            marks={alarmTaskList}
                            onOk={this.valueChange('begintime')}
                        />
                    </div>
                    <div style={itemStyle}>
                        <div style={lableStyle} className={cass({ require: isEdit })}>任务内容</div>
                        <EditInput
                            value={content}
                            edit={isEdit}
                            onChange={this.valueChange('content')}
                        />
                    </div>
                    <div style={itemStyle}>
                        <div style={lableStyle}>任务地点</div>
                        <EditInput
                            value={addressname}
                            edit={isEdit}
                            onChange={this.valueChange('addressname')}
                        />
                    </div>
                    <div style={itemStyle}>
                        <div style={lableStyle}>联系人</div>
                        <EditMultiInput
                            value={contacts}
                            edit={isEdit}
                            onChange={this.valueChange('contacts')}
                        />
                    </div>
                </div>
            </>
        );
    }
}

export default TaskInfo